<div class="map-wrapper">
    <div class="side-menu-wrapper">
        <button nz-button nzType="primary" nzShape="circle" (click)="sideMenuVisibility=!sideMenuVisibility"><i nz-icon
                [nzType]="sideMenuVisibility?'menu-fold':'menu-unfold'"></i></button>
        <nz-sider *ngIf="sideMenuVisibility" class="nz-sider">
            <kylin-side-menu [sidebarMenuData]="sidebarMenuList"></kylin-side-menu>
        </nz-sider>
    </div>

    <div id="map" class="map">
    </div>

    <kylin-map-interaction [map]="map" [operationData]="utilsData"></kylin-map-interaction>
    <div class="button-group">

        <div class="button-group-item">
            <!-- <button nz-button nzType="default" nzShape="circle"
                (click)="this.administrativeLayerMenu=!this.administrativeLayerMenu">
                <kylin-icon icon="eye"></kylin-icon>
            </button> -->
            <div class="left-menu" *ngIf="administrativeLayerMenu">
                <ul style="width:120px;left: -120px">
                    <li>省界
                        <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.province"
                            (ngModelChange)="administrativeLayer($event,'province')">
                        </nz-switch>
                    </li>
                    <li>市界
                        <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.city"
                            (ngModelChange)="administrativeLayer($event,'city')">
                        </nz-switch>
                    </li>
                    <li>区县界
                        <nz-switch class="switch" nzSize="small" [ngModel]="administrativeLayerButtons.counties"
                            (ngModelChange)="administrativeLayer($event,'counties')"></nz-switch>
                    </li>
                </ul>
            </div>
        </div>

        <div class="button-group-item">
            <button nz-button nzType="default" nzShape="circle" (click)="rotateNorth()">
                <kylin-icon icon="man"></kylin-icon>
            </button>
        </div>

        <div class="button-group-item" (click)="this.switchLayerMenu=!this.switchLayerMenu">
            <button nz-button nzType="default" nzShape="circle">
                <kylin-icon icon="fork"></kylin-icon>
            </button>
            <div class="left-menu" *ngIf="switchLayerMenu">
                <ul>
                    <li (click)="switchLayer('default')">标准地图</li>
                    <li (click)="switchLayer('satellite')">卫星图</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="map-layer-search">
        <kylin-map-layer-search [map]="map"></kylin-map-layer-search>
    </div>
    <div class="location-search">
        <kylin-location-search [map]="map"></kylin-location-search>
    </div>

    <div class="map-legend" *ngIf="hasMapLegend">
        <kylin-map-legend (close)="mapLegendClose($event)"></kylin-map-legend>
    </div>

    <button *ngIf="hasMapLegendButton" class="map-legend-button" nz-button nzType="default" nzShape="circle"
        (click)="hasMapLegend=true;hasMapLegendButton = false">
        <kylin-icon icon="up"></kylin-icon>
    </button>

</div>
